<template>
    <div>
        <!-- 导航栏 -->
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/goods.html">购物商城</a>
                <a href="/goods/42/1.html">商品详情</a>

            </div>
        </div>

        <!-- 商品详情 -->
        <div class="section">
            <div class="wrapper clearfix">
                <div class="wrap-box">
                    <!--页面左边-->
                    <div class="left-925">
                        <!-- 1.0 商品图片和介绍区域 -->
                        <div class="goods-box clearfix">
                            <!--商品图片-->
                            <div class="pic-box">
                                <div class="magnifier" id="magnifier1">
                                    <div class="magnifier-container">
                                        <div class="images-cover"></div>
                                        <!--当前图片显示容器-->
                                        <div class="move-view"></div>
                                        <!--跟随鼠标移动的盒子-->
                                    </div>
                                    <div class="magnifier-assembly">
                                        <div class="magnifier-btn">
                                            <span class="magnifier-btn-left">&lt;</span>
                                            <span class="magnifier-btn-right">&gt;</span>
                                        </div>
                                        <!--按钮组-->
                                        <div class="magnifier-line">
                                            <ul class="clearfix animation03">
                                                <li v-for="item in goods.imglist" :key="item.id">
                                                    <div class="small-img">
                                                        <img :src="item.thumb_path" />
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <!--缩略图-->
                                    </div>
                                    <div class="magnifier-view"></div>
                                    <!--经过放大的图片显示容器-->
                                </div>
                            </div>
                            <!--/商品图片-->

                            <!--商品信息-->
                            <div class="goods-spec" v-if="goods.goodsinfo">
                                <h1>{{goods.goodsinfo.title}}</h1>
                                <p class="subtitle">{{goods.goodsinfo.sub_title}}</p>
                                <div class="spec-box">
                                    <dl>
                                        <dt>货号</dt>
                                        <dd id="commodityGoodsNo">{{goods.goodsinfo.goods_no}}</dd>
                                    </dl>
                                    <dl>
                                        <dt>市场价</dt>
                                        <dd>
                                            <s id="commodityMarketPrice">¥{{goods.goodsinfo.market_price}}</s>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>销售价</dt>
                                        <dd>
                                            <em class="price" id="commoditySellPrice">¥{{goods.goodsinfo.sell_price}}</em>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="spec-box">
                                    <dl>
                                        <dt>购买数量</dt>
                                        <dd>
                                            <div class="stock-box">
                                                <el-input-number size="small" :min="1" :max="goods.goodsinfo.stock_quantity" v-model="count"></el-input-number>
                                            </div>
                                            <span class="stock-txt">
                                                库存
                                                <em id="commodityStockNum">{{goods.goodsinfo.stock_quantity}}</em>件
                                            </span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dd>
                                            <div class="btn-buy" id="buyButton">
                                                <button class="buy" onclick="cartAdd(this,'/',1,'/shopping.html');">立即购买</button>
                                                <button class="add" ref="addToShopCartButton" @click="addToShopCart">加入购物车</button>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                            </div>
                            <!--/商品信息-->
                        </div>

                        <!-- 2.0 选项卡区域 -->
                        <div id="goodsTabs" v-if="goods.goodsinfo" class="goods-tab bg-wrap">
                            <!--选项卡-->
                            <Affix>
                                <div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
                                    <ul>
                                        <li>
                                            <a :class="isShowContent? 'selected' : '' " @click="switchGoodsInfoAndGoodsComment(true)" href="javascript:;">商品介绍</a>
                                        </li>
                                        <li>
                                            <a :class="!isShowContent? 'selected' : '' " @click="switchGoodsInfoAndGoodsComment(false)" href="javascript:;">商品评论</a>
                                        </li>
                                    </ul>
                                </div>
                            </Affix>
                            <!--/选项卡-->

                            <!--选项内容-->
                            <div v-show="isShowContent" class="tab-contententry" style="display:block;">
                                <p v-html="goods.goodsinfo.content"></p>
                            </div>

                            <div v-show="!isShowContent" class="tab-content" style="display: block;">
                                <!--网友评论-->
                                <div class="comment-box">
                                    <!--取得评论总数-->
                                    <div id="commentForm" name="commentForm" class="form-box">
                                        <div class="avatar-box">
                                            <i class="iconfont icon-user-full"></i>
                                        </div>
                                        <div class="conn-box">
                                            <div class="editor">
                                                <textarea id="txtContent" name="txtContent" sucmsg="" datatype="*10-1000" v-model="commenttxt"></textarea>
                                                <span class="Validform_checktip"></span>
                                            </div>
                                            <div class="subcon">
                                                <input id="btnSubmit" name="submit" type="submit" @click="postComment" value="提交评论" class="submit">
                                                <span class="Validform_checktip"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <ul id="commentList" class="list-box">
                                        <p v-if="goodsComment.totalcount==0" style="margin:5px 0 15px 69px;line-height:42px;text-align:center;border:1px solid #f7f7f7;">暂无评论，快来抢沙发吧！</p>
                                        <li v-for="(item,index) in goodsComment.message" :key="index">
                                            <div class="avatar-box">
                                                <i class="iconfont icon-user-full"></i>
                                            </div>
                                            <div class="inner-box">
                                                <div class="info">
                                                    <span>{{item.user_name}}</span>
                                                    <span>{{item.add_time | dateFmt}}</span>
                                                </div>
                                                <p>{{item.content}}</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <!--放置页码-->
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.pageIndex" :page-sizes="[1, 2, 10, 20]"
                                        :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="goodsComment.totalcount">
                                    </el-pagination>
                                    <!--/放置页码-->
                                </div>
                                <!--/网友评论-->
                            </div>
                        </div>
                    </div>
                    <!--/页面左边-->

                    <!--页面右边-->
                    <div class="left-220">
                        <div class="bg-wrap nobg">
                            <div class="sidebar-box">
                                <h4>推荐商品</h4>
                                <ul class="side-img-list">
                                    <li v-for="item in goods.hotgoodslist" :key="item.id">
                                        <div class="img-box">
                                            <router-link :to="'/site/goodsinfo/'+item.id">
                                                <img :src="item.img_url">
                                            </router-link>
                                        </div>
                                        <div class="txt-box">
                                            <router-link :to="'/site/goodsinfo/'+item.id">{{item.title}}</router-link>
                                            <span>{{item.add_time | dateFmt('YYYY-MM-DD')}}</span>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--/页面右边-->
                </div>
            </div>
        </div>

        <!-- 动画 -->
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
            <div v-show="isShowAnimateImg" id="animateImgId" class="animateImg" v-if="goods.goodsinfo">
                <img width="100%" height="100%" :src="goods.goodsinfo.img_url" alt="">
            </div>
        </transition>
    </div>
</template>

<style scoped>
    /** 导入图片预览的样式 */

    @import "../../statics/site/js/jqueryplugins/jqimgzoom/css/magnifier.css";

    .animateImg {
        border:1px solid rgba(92,92,92,0.3);
        position: absolute;
        transition: all 0.5s;
        width: 50px;
        height: 50px;
    }
</style>

<script>
    //导入图片样式的js
    import "../../statics/site/js/jqueryplugins/jqimgzoom/js/magnifier.js"

    //导入iview的Affix组件
    import { Affix } from 'iview'

    //导入公共的js
    // import {bus,SHOPCARTCHANGE} from '../../common/common.js'
    export default {
        data() {
            return {
                goods: {},
                count: 1,//商品数量
                isShowContent: true,//是否显示内容
                pageIndex: 1,
                pageSize: 2,
                goodsComment: {},
                commenttxt: '',
                addToShopCartButtonOffset: null,
                shoppingCartCountOffset: null,
                isShowAnimateImg: false
            }
        },
        created() {
            this.getGoodsData()
            this.getCommontListData()
        },
        mounted() {
            setTimeout(() => {

                //获取添加购物车的left、top
                this.addToShopCartButtonOffset = $(this.$refs.addToShopCartButton).offset();

                //获取shoppingCartCount的Offset值
                this.shoppingCartCountOffset = $("#shoppingCartCount").offset()

                $('#animateImgId').css('left', this.addToShopCartButtonOffset.left + 'px').css('top', this.addToShopCartButtonOffset.top + 'px')
            }, 1000);
        },
        methods: {
            //获取商品详情数据
            getGoodsData() {
                const url = `site/goods/getgoodsinfo/${this.$route.params.goodsId}`

                this.$axios.get(url).then(response => {
                    this.goods = response.data.message
                    this.goods.goodsinfo.img_url = `http://39.108.135.214:8899${this.goods.goodsinfo.img_url}`

                    setTimeout(() => {
                        $('#magnifier1').imgzoon({ magnifier: '#magnifier1' });
                    }, 200);
                })
            },
            //切换商品介绍&商品评论
            switchGoodsInfoAndGoodsComment(isShowContent) {
                this.isShowContent = isShowContent
            },
            //获取评论列表的数据
            getCommontListData() {
                const url = `site/comment/getbypage/goods/${this.$route.params.goodsId}?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`

                this.$axios(url).then(response => {
                    this.goodsComment = response.data
                })
            },
            //分页条相关
            handleSizeChange(pageSize) {
                this.pageSize = pageSize

                this.getCommontListData()
            },
            handleCurrentChange(currentPage) {
                this.pageIndex = currentPage

                this.getCommontListData()
            },
            //提交评论
            postComment() {
                const url = `site/validate/comment/post/goods/${this.$route.params.goodsId}`

                this.$axios.post(url, { commenttxt: this.commenttxt }).then(response => {
                    if (response.data.status == 1) {
                        this.$message.error(response.data.message)
                        return
                    }

                    this.$message.success("评论成功")
                    this.commenttxt = ""

                    this.getCommontListData()
                })
            },
            //添加到购物车
            addToShopCart() {
                this.isShowAnimateImg = true

                // bus.$emit(SHOPCARTCHANGE,this.count)

                //保存到Vuex中
                const goodsObj = {goodsId:this.$route.params.goodsId,count:this.count}
                this.$store.commit('addGoods',goodsObj)
            },
            beforeEnter: function (el) {
                //设置起始位置
                el.style.left = `${this.addToShopCartButtonOffset.left}px`
                el.style.top = `${this.addToShopCartButtonOffset.top}px`
            },
            // 此回调函数是可选项的设置
            // 与 CSS 结合时使用
            enter: function (el, done) {
                el.offsetHeight
                //设置结束位置
                el.style.left = `${this.shoppingCartCountOffset.left}px`
                el.style.top = `${this.shoppingCartCountOffset.top}px`
                // ...
                done()
            },
            afterEnter: function (el) {
                this.isShowAnimateImg = false
            },
        },
        watch: {
            $route() {
                this.count = 1
                this.getGoodsData()
                this.getCommontListData()
            }
        },
        components: {
            Affix
        }
    }
</script>